<template>
  <div class="ma-content-block p-4">
    <ma-crud :options="crud" :columns="columns" ref="crudRef"   @selection-change="selectChange">
      <template #tableAfterButtons>
        <a-button
            @click="batchAudit"
            type="outline"
            status="success"
        ><template #icon><IconExperiment /></template>批量审核</a-button>
      </template>

      <template #info="{ record }">
        <div class="flex flex-col items-center">
          <a-avatar>
            <img :src="record.avatar ? $tool.showFile(record.avatar) : ''" style="object-fit: cover" />
          </a-avatar>
          <text>{{ record.nickname || '微信用户' }}</text>
        </div>
      </template>

      <template #operationBeforeExtend="{ record }">
        <a-link @click="audit(record)" v-if="record.status === 0"><icon-arrow-up /> 审核</a-link>
      </template>
    </ma-crud>

    <a-modal
        v-model:visible="visible"
        @ok="doApplyAudit"
        @cancel="approveClose"
        okText="审核" cancelText="关闭"
        unmountOnClose
        draggable
    >
      <template #title>
        title
      </template>
      <div>
        <a-form :model="approveForm">
          <a-form-item field="remark" label="审核备注">
            <a-input v-model="approveForm.remark" placeholder="拒绝时请填写拒绝原因"/>
          </a-form-item>
          <a-form-item field="status" label="审核结果">
            <a-radio-group v-model="approveForm.status" :options="[{ label: '通过', value: 1 },{ label: '拒绝', value: 2 }]" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue'
import app from '@/config/app.js'

import api from '@/api/prm/level_apply.js'
import { Message } from '@arco-design/web-vue'

const levels = app.levels
const crudRef = ref()

const selecteds = ref([])
//设置选中项
const selectChange = (val) => selecteds.value = val

//审核弹窗
const visible = ref(false);
//审核表单
const approveForm = ref({applyId:0,remark:'',status:1});

const audit = async (record) => {
  approveForm.value.applyId = record.id
  visible.value = true;
}
const batchAudit = async () => {
  console.log(selecteds.value);

  if (selecteds.value.length === 0) {
    Message.error('至少要选择一条数据')
    return
  }

  approveForm.value.applyId = selecteds.value
  visible.value = true;
}

const approveClose = () => {
  visible.value = false;
}
//执行审核
const doApplyAudit = async () => {

  let response
  response = await api.applyAudit(approveForm.value)

  response.success && Message.success(response.message)

  curd.refresh()
}



//表格
const crud = reactive({
  api: api.list,
  showIndex: false,
  // pageLayout: 'fixed',
  showTools:false,
  // tablePagination:true,
  rowSelection: {showCheckedAll: true},
  operationColumn: true,
  operationColumnWidth: 200,
  searchColNumber:3,
  add: {show: false, api: api.add, auth: ['prm:level_apply:save']},
  edit: {show: false, api: api.update, auth: ['prm:level_apply:update']},
  delete: {show: false, api: api.delete, auth: ['prm:level_apply:delete'],},
  formOption: {viewType: 'drawer', width: 800},
})

const columns = reactive([
  {title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50, hide: true},
  {title: '头像/昵称', dataIndex: 'info', formType: 'input', search: false, width: 80,},
  {title: '手机号', dataIndex: 'phone', formType: 'input', search: true, width: 100,},
  {title: '姓名', dataIndex: 'name', formType: 'input', search: true, width: 80,},
  {title: '邀请码', dataIndex: 'invite_code', formType: 'input', search: true, width: 80,},
  {title: '会员等级', dataIndex: 'level', formType: 'select', search: false, width: 80,
    dict: {data: levels, translation: true},
  },
  {title: '状态', dataIndex: 'status', formType: 'select', search: true, width: 80,
    dict: {data: [{label: '未审核', value: 0}, {label: '已审核', value: 1}], translation: true},
  },
  {title: '直邀人数', dataIndex: 'invite_count', formType: 'input', search: false, width: 80,},
  {
    title: '申请时间', dataIndex: 'created_at', addDisplay: false, editDisplay: false,
    search: true, formType: 'range', width: 180
  }])

</script>

<script>
export default {name: 'prm:level_apply'}
</script>

<style scoped>

</style>
